<template>
  <div>
    <el-alert v-if="tis" :title="tis" type="success" show-icon :closable="false"/>
     <el-table :data="this.tableData" :row-key="getRowKeys"
     @selection-change="handleSelectionChange" ref="table" border stripe>
        <tr v-for="(item, index) in this.tableLabel" :key="index">
            <el-table-column v-if="item.type==='checkbox'" :fixed="item.type==='checkbox'?'left':'none'" type="selection" width="55" :selectable="checkSelectable" :reserve-selection="true"></el-table-column>
            <el-table-column v-else-if="item.type==='statusFlag'" show-overflow-tooltip
          resizable :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                <el-switch
                active-color="#13ce66"
                class="switch"
                inactive-color="#F04134"
                active-text="启用"
                inactive-text="禁用"
                :disabled="scope.row.isSwitch"
                :value="scope.row.statusFlag == '1'?true:false"
                @change="setEnable(scope.row)"
              />
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='menuFlag'" show-overflow-tooltip
          resizable :prop="item.prop" :label="item.label" :min-width="item.width">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.menuFlag=='1'">菜单</el-tag>
                    <el-tag v-if="scope.row.menuFlag=='0'" type="info">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='roleNames'" show-overflow-tooltip
          resizable :prop="item.prop" :label="item.label" :min-width="item.width">
                <template slot-scope="scope">
                    {{scope.row.roleNames && scope.row.roleNames.length >= 1 ? scope.row.roleNames[0].name:''}}
                </template>
              </el-table-column>
            <el-table-column v-else-if="item.type==='createTime'" show-overflow-tooltip
          resizable :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatDate">
            </el-table-column>
            <el-table-column v-else-if="item.type==='updateTime'" show-overflow-tooltip
          resizable :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatDate">
            </el-table-column>
            <el-table-column v-else-if="item.type==='normal'" show-overflow-tooltip
          resizable :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
        </tr>
        <el-table-column label="操作" :fixed="this.models.fixed" :width="this.models.width">
            <template slot-scope="scope">
                <el-button type="primary" v-if="scope.row.edit" size="mini" @click="edit(scope.row)">修改</el-button>
                <el-button type="danger" v-if="scope.row.del" size="mini" @click="del(scope.row)">删除</el-button>
                <el-button type="primary" v-if="scope.row.details" size="mini" @click="details(scope.row)">详情</el-button>
                <el-button type="primary" v-if="scope.row.openPermission" size="mini" @click="openPermission(scope.row)">分配权限</el-button>
                <el-button type="primary" v-if="scope.row.config" size="mini" @click="config(scope.row)">配置工作流</el-button>
                <el-button type="primary" v-if="scope.row.resetPwd" size="mini" @click="resetPwd(scope.row)">重置密码</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="this.models.total"
          :page-sizes="[10,20,30,40,50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>

  </div>
</template>

<script>
import moment from 'moment'
export default {
    props: {
        tableData: {
          type: Array,
          default: () => {
              return [];
          }
        },
        tableLabel:{
          type: Array,
          default: () => {
              return [];
          }
        },
        models: {
          type: Object,
          default: () => {
              return null;
          }
        },
    },
    data() {
        return {
            tis:"",
            ids:[],
            params: {
                type:"page",
                page: 1,
                pageSize: 10
            },
        };
    },
    mounted(){
        if(this.models.hackReset){
          this.$refs.table.clearSelection();
          this.ids = [];
          this.tis = "";
        }
    },
    methods: {
      checkSelectable(row) {
        return row.id !== 162 && row.account !== 'admin';
      },
        formatDate(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD  HH:mm:ss")
        },
        getRowKeys(row) {
            return row.id
        },
        handleSelectionChange(val) {
          let ids = [];
          val.forEach(item =>{ 
              ids.push(item)
          });
          this.ids = ids;
          this.tis="已选择 "+val.length+" 项";
          if(val.length==0){
            this.tis="";
            this.ids = [];
          }
          this.$emit("on-selection-click", this.ids);
        },
        edit(row){
            this.$emit("on-edit-click",row);
        },
        del(row){
            this.$emit("on-del-click",row);
        },
        setEnable(row){
            this.$emit("on-enable-click",row);
        },
        details(row){
            this.$emit("on-details-click",row);
        },
        config(row){
            this.$emit("on-config-click",row);
        },
        resetPwd(row){
            this.$emit("on-resetPwd-click",row);
        },
        openPermission(row){
            this.$emit("on-openPermission-click",row);
        },
        handlePageChange(page) {
           this.params.page = page;
            this.loadList();
        },
        handleSizeChange(page) {
            this.params.pageSize = page;
            this.loadList();
        },
        loadList() {
            this.$emit("on-search-click", this.params);
        },
        onClose() {
            this.$emit("on-cancel");
        }
    }
};
</script>

